<template>
  <view class="container">
    <image
      class="bg"
      src="https://api.hjsfpay.com/image/newimg/login-bg.png"
      mode="widthFix"
    >
    </image>
    <view class="content">
      <view class="welcome">
        <view class="text">欢迎来到汇数星云付Pro</view>
        <view class="spe"></view>
      </view>
      <view class="formBox">
        <view class="form-item">
          <image
            class="icon-phone"
            src="/static/images/login-phone.png"
          ></image>
          <u-input
            class="input"
            v-model="form.phone"
            @input="phoneInput"
            placeholder="请输入您的手机号"
          />
        </view>
        <view class="form-item margin-top-40">
          <image
            class="icon-password"
            src="/static/images/login-password.png"
          ></image>
          <u-input
            class="input"
            placeholder="请输入验证码"
            v-model="form.code"
            type="text"
            @input="codeInput"
          ></u-input>
          <view
            slot="right"
            class="sendCodeBtn"
            @click="getCode"
          >{{
            codeTips
          }}</view>
        </view>
        <view class="form-item margin-top-40">
          <image
            class="icon-password"
            src="/static/images/login-password.png"
          ></image>
          <u-input
            class="input"
            v-model="form.password"
            type="password"
            placeholder="请输入您的新密码"
            @input="passwordInput"
          />
        </view>
        <view class="form-item margin-top-40">
          <image
            class="icon-password"
            src="/static/images/login-password.png"
          ></image>
          <u-input
            class="input"
            v-model="form.confirmPassword"
            type="password"
            placeholder="请再次输入您的新密码"
            @input="confirmPasswordInput"
          />
        </view>
      </view>

      <view
        class="edit margin-top-50"
        :class="canSubmit ? 'active' : ''"
        @click="submit"
      >修改
      </view>

      <view
        class="gotoLogin"
        @click="gotoLogin"
      >返回登录页面</view>
    </view>
    <u-verification-code
      seconds="60"
      ref="uCode"
      @change="codeChange"
    ></u-verification-code>
  </view>
</template>

<script>
import service from '@/common/service.js';
import util from '@/common/utils';
import md5 from '@/common/md5.js'; //md5加密
export default {
  data() {
    return {
      form: { phone: '', code: '', password: '', confirmPassword: '' },
      canSubmit: false,
      codeTips: '获取验证码'
    };
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    },
    handleLogin() {
      uni.navigateBack({
        delta: 1
      });
    },
    codeChange(text) {
      this.codeTips = text;
    },
    phoneInput(value) {
      this.setSubmitBtnStatus();
    },
    codeInput(value) {
      this.setSubmitBtnStatus();
    },
    passwordInput(value) {
      this.setSubmitBtnStatus();
    },
    confirmPasswordInput(value) {
      this.setSubmitBtnStatus();
    },
    setSubmitBtnStatus() {
      if (!this.form.phone || !util.checkPhone(this.form.phone)) {
        this.canSubmit = false;
        return;
      }
      if (!this.form.code) {
        this.canSubmit = false;
        return;
      }
      if (!this.form.password) {
        this.canSubmit = false;
        return;
      }
      if (!this.form.confirmPassword) {
        this.canSubmit = false;
        return;
      }
      this.canSubmit = true;
    },
    // 获取验证码
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        if (!this.form.phone) {
          util.showToast('手机号不能为空');
          return;
        }
        if (!util.checkPhone(this.form.phone)) {
          util.showToast('手机号格式有误');
          return;
        }
        uni.showLoading({
          title: '正在获取验证码'
        });
        const that = this;
        const params = {
          phone: that.form.phone
        };
        service.sendForgetPwdSmsCode(
          params,
          function (res) {
            if (res && res.data) {
              uni.hideLoading();
              util.showToast('验证码已发送');
              that.$refs.uCode.start();
            } else {
              util.showToast(res.message || '发送失败');
            }
          },
          function (res) {
            util.showToast(res.message || '发送失败');
          }
        );
      } else {
        util.showToast('倒计时结束后再发送');
      }
    },
    checkValue() {
      if (!this.form.phone) {
        util.showToast('手机号不能为空');
        return false;
      }
      if (!util.checkPhone(this.form.phone)) {
        util.showToast('手机号格式有误');
        return false;
      }
      if (!this.form.code) {
        util.showToast('验证码不能为空');
        return false;
      }
      if (!this.form.password) {
        util.showToast('密码不能为空');
        return false;
      }
      if (!this.form.confirmPassword) {
        util.showToast('确认密码不能为空');
        return false;
      }
      if (this.form.password !== this.form.confirmPassword) {
        util.showToast('两次密码输入不一致');
        return false;
      }
      this.canSubmit = true;
      return true;
    },
    submit() {
      if (!this.checkValue()) {
        return;
      }
      const that = this;
      const params = {
        phone: that.form.phone,
        smsCode: that.form.code,
        pwd: md5.md5(that.form.password)
      };
      service.memberSetForgetPwd(
        params,
        function (res) {
          if (res && res.data) {
            uni.setStorageSync('userName', that.form.phone);
            uni.setStorageSync('psw', that.form.password);
            util.showToast('修改成功，正在跳转');
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              });
            }, 1500);
          } else {
            util.showToast(res.message || '修改失败');
          }
        },
        function (res) {
          util.showToast(res.message || '修改失败');
        }
      );
    },
    gotoLogin() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  .bg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 9;
  }
  .agreement {
    position: absolute;
    left: 0;
    bottom: 60rpx;
    width: 100%;
    padding: 0 20rpx;
    z-index: 99;
    .agreement-in {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 100%;
      text-align: center;
    }
    .agreement-text {
      font-size: 22rpx;
      font-weight: normal;
      color: #999999;
      line-height: 1;
      text {
        color: #B7926E;
      }
    }
  }
}

.content {
  position: relative;
  width: 100%;
  padding: 228rpx 50rpx 0;
  background-color: #fff;
  z-index: 99;
  .welcome {
    position: relative;
    display: inline-block;
    .text {
      font-size: 42rpx;
      font-weight: bold;
      color: #222222;
      line-height: 1;
      z-index: 99;
    }
    .spe {
      margin-top: -4rpx;
      width: 100%;
      height: 6rpx;
      border-radius: 3rpx;
      background-color: #B7926E;
      z-index: 9;
    }
  }

  .formBox {
    margin-top: 110rpx;
    width: 100%;
    .form-item {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 88rpx;
      padding: 0 30rpx;
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      border-radius: 10rpx;
      ::v-deep {
        .u-form-item--left {
          width: 0;
          flex: 0;
        }
      }
      .icon-phone {
        margin-right: 20rpx;
        width: 26rpx;
        height: 30rpx;
      }
      .icon-password {
        margin-right: 20rpx;
        width: 27rpx;
        height: 30rpx;
      }
      .input {
        flex: 1;
      }
    }
  }

  .btn-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;
    width: 100%;
    .btn-item {
      font-size: 28rpx;
      font-weight: normal;
      color: #222222;
      line-height: 1;
      cursor: pointer;
      .u-checkbox__label {
        font-size: 28rpx;
        font-weight: normal;
        color: #222222;
      }
    }
  }

  .edit {
    height: 88rpx;
    line-height: 88rpx;
    font-size: 36epx;
    font-weight: normal;
    color: #ffffff;
    background: #e7e7e7;
    border-radius: 10rpx;
    text-align: center;
  }

  .gotoLogin {
    margin: 40rpx auto 0;
    font-size: 28rpx;
    font-weight: 400;
    color: #cd9322;
    text-align: center;
    cursor: pointer;
  }

  .active {
    background: linear-gradient(90deg, #22242e, #434759);
  }

  .register {
    margin: 40rpx auto 0;
    font-size: 28rpx;
    font-weight: 400;
    color: #222222;
    text-align: center;
    cursor: pointer;
    text {
      color: #cd9322;
    }
  }

  .sendCodeBtn {
    width: 200rpx;
    font-size: 24rpx;
    font-weight: normal;
    color: #B7926E;
    text-align: right;
  }
}

.margin-top-30 {
  margin-top: 30rpx;
}

.margin-top-40 {
  margin-top: 40rpx;
}

.margin-top-50 {
  margin-top: 50rpx;
}

.margin-top-60 {
  margin-top: 60rpx;
}

.margin-top-80 {
  margin-top: 80rpx;
}

.margin-top-160 {
  margin-top: 160rpx;
}
</style>

